<template>
  <div>
    <el-container>
      <el-aside width="collapse">
        <el-scrollbar>
          <el-menu
            default-active="2"
            class="el-menu-vertical"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            router
            :collapse="isCollapse"
          >
            <Navbar :ItemList="ItemList" :isCollapse="isCollapse" />
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header>
          <!-- <i class="el-icon-s-unfold" @click="collapseClick"></i> -->
          <div class="box_bgd" @click="isC">
            <!-- 点击展开收起导航和切换对应图标 -->
            <i class="el-icon-s-fold" v-show="block"></i>
            <i class="el-icon-s-unfold" v-show="toggle"></i>
          </div>
        </el-header>
        <el-main>
          <!-- <One/> -->
          <router-view></router-view>
          <!-- <List :listItem="listItem" /> -->
        </el-main>
        <el-footer>
          Copyright © 2021 - 2021 9I Co. All Rights Reserved. 就爱科技 版权所有
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Navbar from "./Navbar/Index.vue";
import routes from "@/router/routes";

export default {
  data() {
    return {
      isCollapse: false, //导航栏默认为展开
      toggle: false, //第二个图标默认隐藏
      block: true, //默认显示第一个图标
    };
  },
  components: {
    Navbar,
  },
  computed: {
    ItemList: function () {
      let rs = this.resolve(routes);
      return rs;
    },
  },
  methods: {
    resolve: function (arr, parentPath = "") {
      let newArr = [];

      arr.forEach((item) => {
        parentPath =
          parentPath && parentPath.lastIndexOf("/") !== parentPath.length - 1
            ? parentPath + "/"
            : parentPath;

        item.path = parentPath + item.path;

        if (item.children && item.children.length > 0) {
          let childArr = this.resolve(item.children, item.path);
          item.children = childArr;
        }

        if (item.alwaysShow && item.children && item.children.length === 1) {
          let oldTitle = item.children[0].title;
          item = item.children[0];
          item.title = oldTitle;
        }

        if (!item.hidden) newArr.push(item);
      });

      return newArr;
    },
    // 动态控制展开与收起和切换对应图标
    isC() {
      this.isCollapse = !this.isCollapse;
      this.toggle = !this.toggle;
      this.block = !this.block;
    },
  },
};
</script>

<style>
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>


<style scoped>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}
.el-icon-s-unfold,
.el-icon-s-fold {
  font-size: 28px;
  cursor: pointer;
  /* transform: rotate(180deg); */
}
.el-scrollbar {
  height: 100vh;
}
.el-aside {
  background-color: #545c64;
  height: 100vh;
}
.el-menu {
  border-right: none;
  height: 100vh;
}
.el-header {
  background-color: rgb(247, 247, 247);
  display: flex;
  align-items: center;
}
.el-main {
  background-color: white;
  height: calc(100vh - 120px);
   overflow-y: scroll
}
.el-footer {
  background-color: rgb(243, 240, 243);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
</style>